<template>
    <div class="container">
        <div class="position-relative">
            <!-- 选项 -->
            <ul class="nav nav-tabs mb-3">
                <li class="nav-item">
                    <a class="nav-link position-relative active" :href="'/followee/'+userId">
                      <i class="text-info">{{ ifshow ?content.map.user.name:'' }}</i> 关注的人
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link position-relative" :href="'/follower/'+userId">
                      关注 <i class="text-info">{{ ifshow ?content.map.user.name:'' }}</i> 的人
                    </a>
                </li>
            </ul>
            <a :href="'/profile/'+userId" class="text-muted position-absolute rt-0">返回个人主页&gt;</a>
        </div>
        
        <!-- 关注列表 -->
        <ul class="list-unstyled">
            <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-for="(item,i) in (ifshow ? content.map.users:[])" :key="i">
                <a :href="'/profile/' + item.user.id">
                    <img :src="item.user.photo" class="mr-4 rounded-circle user-header" alt="用户头像" >
                </a>
                <div class="media-body">
                    <h6 class="mt-0 mb-3">
                        <span class="text-success">{{item.user.name}}</span>
                        <span class="float-right text-muted font-size-12">关注于 <i>{{item.user.registerTime | datatime}}</i></span>
                    </h6>
                    <div>
                      <button v-on:click="follow(item,3,item.user.id)" type="button" class="btn btn-sm float-right mr-5 follow-btn"
                              :class="(ifshow ? item.hasFollowed : false)?'btn-secondary':'btn-info'">
                        {{(ifshow ? item.hasFollowed : false)?'已关注':'关注TA'}}
                      </button>
                    </div>
                </div>
            </li>																			
        </ul>
        <!-- 分页 -->
        <pagination ref="pagination" v-bind:list="getfollowee" v-bind:itemCount="8"></pagination>
    </div>
</template>

<script>
import Pagination from "@/components/pagination";
export default {
    name:'followee',
    data(){
        return{
            userId:"", //用户id
            content:null,
            ifshow:false
        }
    },
    mounted(){
      this.getfollowee(1);
    },
    watch:{
      content(){
        this.setIfshow();
      }
    },
    created(){
      this.setIfshow();
      this.userId = this.$route.params.userId;
    },
    components: {Pagination},
    methods:{
        //获取我关注的人列表
        getfollowee(page){
            // console.log(this.$refs.pagination.size)
            this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/followees/'+this.userId, {
            page: page,
            size: this.$refs.pagination.size,
          }).then((response)=>{
            console.log("查询帖子列表结果：", response);
            this.content = response.data.content;
            this.$refs.pagination.render(page, response.data.content.total);
          })
        },
      //判断对象是有值
      setIfshow(){
        if(this.content != null){
          this.ifshow = true;
        }else{
          this.ifshow = false;
        }
      },
      follow(item,entityType,entityId){
        let _this = this;
        this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/follow', {
          entityType:entityType,
          entityId:entityId,
        }).then((response)=>{
          if (response.data.success) {
            console.log("关注完成：", response);
            let followStatus = response.data.content;
            item.hasFollowed = followStatus;
            _this.getfollowee(1);
          }else{
            Toast.error("关注失败！");
          }
        })
      },
    }
}
</script>

<style lang="scss" scoped>
      @import '@/assets/style/css/global.scss';
</style>